<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/frontSrc/layui/css/layui.css" media="all">

</head>
<body>
 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 40px;">
                        <legend>个人资料</legend>
                    </fieldset>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-lg-offset1" layui-col-lg6>
            <div class="layui-form layuimini-form">
                <form class="layui-form" action="" lay-filter="studentForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名：</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" required lay-verify="required" placeholder="请输入姓名"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
<!--                    根据id修改学员信息，但是id 没必要让用户看到，但是需要传到后端程序-->
                    <input type="hidden" name="id" value="" class="layui-input">



                    <div class="layui-form-item">
                        <label class="layui-form-label">性别：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="sex" value="男" title="男">
                            <input type="radio" name="sex" value="女" title="女" checked>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">电话：</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" required lay-verify="required" placeholder="请输入年龄"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">部门：</label>
                        <div class="layui-input-block">
                            <input type="text" name="department" required lay-verify="required" placeholder="请输入所在城市"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">入职时间:</label>
                        <!-- layui-input-block 输入框会占满除文字外的整行 -->
                        <div class="layui-input-block">
                            <input readonly id="birth" disabled type="text" name="entry_time" placeholder="请选择入职时间" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                   

                    <div class="layui-form-item">
                        <label class="layui-form-label">头像：</label>
                        <input type="hidden" name="pic" id="pic">
                        <div class="layui-input-block">
                            <!--                            <input type="file" name="durl" required lay-verify="required" placeholder=""-->
                            <!--                                   autocomplete="off" class="layui-input">-->

                            <button type="button" class="layui-btn" id="durl">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>

                            <div class="layui-upload-list">
                                <img style="width: 100px" class="layui-upload-img" id="demo1">
                                <p id="demoText"></p>
                            </div>
                            <div style="width: 95px;">
                                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                    <div class="layui-progress-bar" lay-percent=""></div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">修改并保存</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>

<script src="/frontSrc/bs/js/jquery.min.js"></script>
<script src="/frontSrc/layui/layui.js" charset="utf-8"></script>

<script>
    layui.use(["laydate","form","upload"],function(){
        var laydate = layui.laydate;
        var upload = layui.upload;
        var form = layui.form;
         var $ = layui.jquery;
          var element = layui.element;




        //执行一个laydate实例
        laydate.render({
            elem: '#birth', //指定元素
            format:'yyyy-MM-dd',
            // value:'2012/12/12' //默认值
            // value:new Date() //默认值
        });

        //执行实例
        var uploadInst = upload.render({
            elem: '#durl'
            ,url: 'http://localhost:8080/api/util/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code != 200){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                $("#pic").val(res.data.url); // 把图片的地址 存到隐藏域 表单上传时 传到后端
                console.log(res.data.url);

                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });


        // 从 localStorage 把数据取出来   并转成 js 对象
        //  JSON.parse("str")   把字符串转为 js 对象
        var data = JSON.parse(localStorage.getItem("token"));

        //给表单数据赋值
        form.val("studentForm",{
             "username":data.username,
             "id":data.id,
			 "sex":data.sex,
			 "phone":data.phone,
             "department":data.department,
             "entry_time":data.entry_time,
             

        });

        $("#demo1").attr("src",data.pic);
        $("#pic").val(data.pic);
        //监听提交
        form.on('submit(formDemo)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            $.ajax({
                "url":"http://localhost:8080/api/user/upInfo",
                // "headers":{"token":token},
                "data": data.field,
                // result 参数 表式后台响应的数据
                "success":function(result){
					
                    if(result.code == 200){

                        // // 关闭 弹出层
                        // var iframeIndex = parent.layer.getFrameIndex(window.name); 
						parent.layer.msg(result.message,{time:1000,
						end:function(){
							localStorage.setItem("token", JSON.stringify(result.data.info));
							location.reload();
						}});
						
						
						
                        // parent.layer.close(iframeIndex);

                    }
                },
                "dataType":"json"
            });

            return false;
        });

    });
</script>
</body>
</html>